<template>
    <div
        class="theme-container"
        :class="pageClasses"
        @touchstart="onTouchStart"
        @touchend="onTouchEnd"
    >
        <Navbar
            v-if="shouldShowNavbar"
            @toggle-sidebar="toggleSidebar"
        />

        <div
            class="sidebar-mask"
            @click="toggleSidebar(false)"
        ></div>

        <Sidebar
            :items="sidebarItems"
            @toggle-sidebar="toggleSidebar"
        >
            <slot
                name="sidebar-top"
                slot="top"
            />
            <slot
                name="sidebar-bottom"
                slot="bottom"
            />
        </Sidebar>

        <Home v-if="$page.frontmatter.home"/>

        <main v-else-if="isMarketsDetail" class="page">
            <div class="theme-default-content content__default">
                <MarketsDetail></MarketsDetail>
            </div>
        </main>

        <Page
            v-else
            :sidebar-items="sidebarItems"
        >
            <slot
                name="page-top"
                slot="top"
            />
            <slot
                name="page-bottom"
                slot="bottom"
            />
        </Page>
    </div>
</template>

<script>
    import Home from '@theme/components/Home.vue'
    import Navbar from '@theme/components/Navbar.vue'
    import Page from '@theme/components/Page.vue'
    import Sidebar from '@theme/components/Sidebar.vue'
    import {resolveSidebarItems} from '../util'
    import MarketsDetail from "../../components/MarketsDetail";

    export default {
        components: {MarketsDetail, Home, Page, Sidebar, Navbar},

        data() {
            return {
                isMarketsDetail: false,
                isSidebarOpen: false
            }
        },

        computed: {
            shouldShowNavbar() {
                const {themeConfig} = this.$site
                const {frontmatter} = this.$page
                if (
                    frontmatter.navbar === false
                    || themeConfig.navbar === false) {
                    return false
                }
                return (
                    this.$title
                    || themeConfig.logo
                    || themeConfig.repo
                    || themeConfig.nav
                    || this.$themeLocaleConfig.nav
                )
            },

            shouldShowSidebar() {
                const {frontmatter} = this.$page
                return (
                    !frontmatter.home
                    && frontmatter.sidebar !== false
                    && this.sidebarItems.length
                )
            },

            sidebarItems() {
                return resolveSidebarItems(
                    this.$page,
                    this.$page.regularPath,
                    this.$site,
                    this.$localePath
                )
            },

            pageClasses() {
                const userPageClass = this.$page.frontmatter.pageClass
                return [
                    {
                        'no-navbar': !this.shouldShowNavbar,
                        'sidebar-open': this.isSidebarOpen,
                        'no-sidebar': !this.shouldShowSidebar
                    },
                    userPageClass
                ]
            }
        },

        mounted() {
            this.$router.afterEach(() => {
                this.isSidebarOpen = false
            });
            if ((this.$route.path + "").match(/^\/markets\/(([^/]+)\/([^/]+))\/*$/)) {
                this.isMarketsDetail = true;
            }
        },

        methods: {
            toggleSidebar(to) {
                this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
            },

            // side swipe
            onTouchStart(e) {
                this.touchStart = {
                    x: e.changedTouches[0].clientX,
                    y: e.changedTouches[0].clientY
                }
            },

            onTouchEnd(e) {
                const dx = e.changedTouches[0].clientX - this.touchStart.x
                const dy = e.changedTouches[0].clientY - this.touchStart.y
                if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
                    if (dx > 0 && this.touchStart.x <= 80) {
                        this.toggleSidebar(true)
                    } else {
                        this.toggleSidebar(false)
                    }
                }
            }
        }
    }
</script>

<style src="prismjs/themes/prism-tomorrow.css"></style>
<style src="../styles/theme.styl" lang="stylus"></style>
